<template>
  <div class="message">
    <div v-if='!isList'>
      <div class="alarm w50">
        <div class="top">
          <h3>预警消息</h3>
          <a href="javscript:;" @click='getMore'>更多</a>
        </div>
        <div class="content">
          <ul class="contentList">
            <li v-for='(item,index) in alarmList' :key='item.id'>
              <span class="msgIndex">{{index+1}}</span>
              <span class="msgContent">{{item.warnContent}}</span>
              <span class="msgStatus noRead" v-if='item.isRead==0'>未读</span>
              <span class="msgStatus reads" v-if='item.isRead==1'>已读</span>
              <span class="msgStatus" >{{$dateFormat(item.createAt,'yyyy-MM-dd hh:mm:ss')}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="alarm w50" v-if='currentLoginCompanyType!=3'>
        <div class="top">
          <h3>危废转移</h3>
          <a href="javscript:;">更多</a>
        </div>
        <div class="content">
          <ul class="contentList">
            <li v-for='(item,index) in dispatchList' :key='item.id'>
              <span class="msgIndex">{{index+1}}</span>
              <span class="msgContent">{{item.warnContent}}</span>
              <span class="msgStatus noRead" v-if='item.isRead==0'>未读</span>
              <span class="msgStatus reads" v-if='item.isRead==1'>已读</span>
              <span class="msgStatus" >{{$dateFormat(item.createAt,'yyyy-MM-dd hh:mm:ss')}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="alarm w50" v-if='currentLoginCompanyType!=3'>
        <div class="top">
          <h3>合同审批</h3>
          <a href="javscript:;">更多</a>
        </div>
        <div class="content">
          <ul class="contentList">
            <li v-for='(item,index) in constractList' :key='item.id'>
              <span class="msgIndex">{{index+1}}</span>
              <span class="msgContent">{{item.warnContent}}</span>
              <span class="msgStatus noRead" v-if='item.isRead==0'>未读</span>
              <span class="msgStatus reads" v-if='item.isRead==1'>已读</span>
              <span class="msgStatus" >{{$dateFormat(item.createAt,'yyyy-MM-dd hh:mm:ss')}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="alarm w50" v-if='currentLoginCompanyType!=3'>
        <div class="top">
          <h3>联单审批</h3>
          <a href="javscript:;">更多</a>
        </div>
        <div class="content">
          <ul class="contentList">
            <li v-for='(item,index) in kuponoList' :key='item.id'>
              <span class="msgIndex">{{index+1}}</span>
              <span class="msgContent">{{item.warnContent}}</span>
              <span class="msgStatus noRead" v-if='item.isRead==0'>未读</span>
              <span class="msgStatus reads" v-if='item.isRead==1'>已读</span>
              <span class="msgStatus" >{{$dateFormat(item.createAt,'yyyy-MM-dd hh:mm:ss')}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="alarm w50" v-if='currentLoginCompanyType!=4'>
        <div class="top">
          <h3>年度申报</h3>
          <a href="javscript:;">更多</a>
        </div>
        <div class="content">
          <ul class="contentList">
            <li v-for='(item,index) in declareList' :key='item.id'>
              <span class="msgIndex">{{index+1}}</span>
              <span class="msgContent">{{item.warnContent}}</span>
              <span class="msgStatus noRead" v-if='item.isRead==0'>未读</span>
              <span class="msgStatus reads" v-if='item.isRead==1'>已读</span>
              <span class="msgStatus" >{{$dateFormat(item.createAt,'yyyy-MM-dd hh:mm:ss')}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-if='isList'>
      <el-button type="text" size="medium" @click="orderGoBack">返回</el-button>
      <el-form label-width="100px" :model="messageForm" :inline="true">
        <el-form-item label="消息类型" class="">
          <el-select v-model="messageForm.meessageTypes" placeholder="类型">
            <el-option label='预警消息' value='0,1,2'></el-option>
            <el-option label='危废转移' value='3,4,5,6'></el-option>
            <el-option label='合同审批' value='8'></el-option>
            <el-option label='联单审批' value='9'></el-option>
            <el-option label='年度申报' value='7'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" class="">
          <el-select v-model="messageForm.isRead" placeholder="状态">
            <el-option label='已读' value='1'></el-option>
            <el-option label='未读' value='0'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期区间">
          <div class="block">
            <el-date-picker v-model="messageForm.timer" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchResult">查询</el-button>
          <el-button type="default" @click="resetConditions">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width='60'>
        </el-table-column>
        <el-table-column prop="warnContent" label="内容" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope='scope'>
            <span>{{scope.row.isRead==0?'未读':'已读'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间">
          <template slot-scope='scope'>
            <span>{{$dateFormat(scope.row.createAt,'yyyy-MM-dd hh:mm:ss')}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data() {
    return {
      currentLoginCompanyType: null,
      page: 1,
      limit: 10,
      dispatchList: [],
      dataList: [],
      alarmList: [],
      declareList: [],
      constractList: [],
      kuponoList: [],
      isList: false,
      pickerOptions2: {
        shortcuts: [{
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      messageForm: {
        isRead: null,
        timer: [],
        state: null,
        startTime: null,
        endTime: null,
        messageTypes: []
      },
      tableData: [],
      currentPage4: 1,
      total: 0
    };
  },
  mounted() {
    this.currentLoginCompanyType = localStorage.companyType;
    this.initDataList(3, 4, 5, 6);
    this.initDataList(0, 1, 2);
    this.initDataList(7);
    this.initDataList(8);
    this.initDataList(9);

  },
  methods: {
    searchResult() {
      console.log(this.messageForm);
      this.$common.$ajax('/op/message/findWarnList', {
        messageTypes: this.messageForm.messageTypes,
        page: {
          limit: this.limit,
          page: this.page,
        },
        state: this.messageForm.state,
        startTime: this.messageForm.timer[0] || null,
        endTime: this.messageForm.timer[1] || null
      }, 'post').then(res => {
        this.tableData = res.data.body.list

        this.total = res.data.body.total
      })
    },
    resetConditions() {
      for (let item in this.messageForm) {
        console.log(item)

        if (Array.isArray(this.messageForm[item])) {
          this.messageForm[item] = []
        } else {
          this.messageForm[item] = ''
        }
      }
      this.searchResult();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.initTableList()
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initTableList()
    },
    initTableList() {
      this.$common.$ajax('/op/message/findWarnList', {

        page: {
          limit: this.limit,
          page: this.page,
        }
      }, 'post').then(res => {
        // if (arr.join(',') == '3,4,5,6') {
        //   this.dispatchList = res.data.body.list
        // } else if (arr.join(',') == '0,1,2') {
        //   this.alarmList = res.data.body.list
        // } else if (arr.join(',') == '8') {
        //   this.constractList = res.data.body.list
        // } else if (arr.join(',') == '9') {
        //   this.kuponoList = res.data.body.list
        // } else if (arr.join(',') == '7') {
        //   this.declareList = res.data.body.list
        // }
        console.log(res.data.body)
        this.tableData = res.data.body.list;
        this.total = res.data.body.total
      })
    },
    initDataList() {
      let arr = [];
      for (let item in arguments) {
        arr.push(arguments[item])
      }
      this.$common.$ajax('/op/message/findWarnList', {
        messageTypes: arr,
        page: {
          limit: 6,
          page: this.page,
        }
      }, 'post').then(res => {
        if (arr.join(',') == '3,4,5,6') {
          this.dispatchList = res.data.body.list
        } else if (arr.join(',') == '0,1,2') {
          this.alarmList = res.data.body.list
        } else if (arr.join(',') == '8') {
          this.constractList = res.data.body.list
        } else if (arr.join(',') == '9') {
          this.kuponoList = res.data.body.list
        } else if (arr.join(',') == '7') {
          this.declareList = res.data.body.list
        }
      })
    },
    getMore(val) {

      this.isList = true;
      this.initTableList()
    },
    orderGoBack() {
      // this.isOrder = true;
      this.reload()
    },

  },

};

</script>
<style lang="scss" scoped>
.message {
  // display: flex;
  // justify-content: space-between;

  .w50 {
    width: 49%;
    border: 1px solid #f5f5f5;
    border-radius: 10px;
    box-sizing: border-box;
    float: left;
    margin-top: 30px;
    min-height: 321px;

    &:nth-child(2n) {
      float: right;
    }

    .top {
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: cneter;
      border-bottom: 1px solid #f5f5f5;

      //   height: 40px;
      //   line-height: 40px;
      h3 {
        font-size: 18px;
      }

      a {
        font-size: 14px;
        color: deepskyblue;
      }
    }

    .content {
      .contentList {
        padding: 20px;

        li {
          display: flex;
          justify-content: space-between;
          height: 40px;
          // line-height: 30px;
          padding: 10px 0;
          align-items: center;

          span {
            display: inline-block;
            vertical-align: top;
          }

          .msgIndex {
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background: orange;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #fff;
          }

          .msgContent {
            font-size: 14px;
          }
        }
      }
    }
  }
}

.msgStatus {
  font-size: 14px;
}

.reads {
  color: #999;
}

.noRead {
  color: #3ae2cb
}

.msgContent {
  display: inline-block;
  height: 100%;
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>
